<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Floating heart</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<css-doodle><style>
  --color: #51eaea, #fffde1, #ff9d76, #FB3569;

  @grid: 30x1 / 100vw 100vh / #270f34; 
  
  :container {
    perspective: 30vmin;
    --deg: @p(-180deg, 180deg);
  }
  
  :after, :before {
    content: '';
    background: @p(--color); 
    @place: @r(100%) @r(100%);
    @size: @r(6px);
    @shape: heart;
  }

  @place: center;
  @size: 18vmin; 

  box-shadow: @m2(0 0 50px @p(--color));
  background: @m100(
    radial-gradient(@p(--color) 50%, transparent 0) 
    @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
    no-repeat
  );

  will-change: transform, opacity;
  animation: scale-up 12s linear infinite;
  animation-delay: calc(-12s / @I * @i);

  @keyframes scale-up {
    0%, 95.01%, 100% {
      transform: translateZ(0) rotate(0);
      opacity: 0;
    }
    10% { 
      opacity: 1; 
    }
    95% {
      transform: 
        translateZ(35vmin) rotateZ(var(--deg));
    }
  }
</style></css-doodle>
<!-- partial -->
  <script src='https://unpkg.com/css-doodle@0.34.0/css-doodle.min.js'></script>
</body>
</html>
